import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  TextInput,
  StatusBar,
  Image,
  TouchableWithoutFeedback,
  ImageBackground,
  TouchableOpacity,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native';

import EditView from '../EditView';
import LoginButton from '../LoginButton';
import LoginSuccess from '../LoginButton';
import NetUitl from '../NetUtil';

const UserLogin = ({ navigation }) => {
  const { navigate } = navigation;
  
  return (
    <View style={styles.container}>
      {/* 标题栏 */}
      <View style={styles.title}>
        <Text style={styles.titleText}>简礼</Text>      
      </View>
      {/* 横向Tab */}
      <View style={styles.hengtab}>
        <View style={styles.hengtabItem}>
          <TouchableOpacity
            style={{ width: 80}}
            onPress={() => navigate('UserLogin')}>
            <Text style={(styles.hengtabText, styles.hengtabSelected)}>
              用户登录
            </Text>
          </TouchableOpacity>
        </View>
        <View style={styles.hengtabItem}>
          <TouchableOpacity
            style={{ width: 80 }}
            onPress={() => navigate('MerchantLogin', { title: '商家登录' })}>
            <Text style={styles.hengtabText}>商家登录</Text>
          </TouchableOpacity>
        </View>
      </View>
      {/*表单*/}
      <View>
        <EditView name='用户名'onChangeText={(text) => {this.userName = text;}}/>
        <EditView name='密码' onChangeText={(text) => {this.password = text;}}/>
        {/*注册 找回密码 */}
         <View style={{flexDirection:'row'}}>
          <Text style={{color:"#4A90E2",marginTop:10,marginLeft:70,marginRight:30}} 
           onPress={() => navigate('Register', { title: '注册' })}>注册</Text>
          <Text style={{color:"#4A90E2",marginTop:10,marginLeft:80,marginRight:30}}                    onPress={() => navigate('FindPwd', { title: '找回密码' })}>找回密码</Text>
        </View>
        {/*登录 */}
        <LoginButton name='登录' onPressCallback={this.onPressCallback}/>
      </View>
    </View>

  );
  onPressCallback = () => {

    let formData = new FormData();
    formData.append("loginName",this.userName);
    formData.append("pwd",this.password);
    let url = "http://10.7.86.204:8080/user/";
    NetUitl.postJson(url,formData,(responseText) => {
       alert(responseText);
       this.onLoginSuccess();
    })

  };
};


const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
  },
  // 标题栏
  title: {
    flexDirection: 'row',
  },
  titleText: {
    height: 50,
    fontSize: "2.0em",
    fontWeight:"bold",
    textAlign:"center",
    lineHeight: 50,
    paddingLeft: 30,
    flex: 2,
  },
  // 横向Tab
  hengtab: {
    marginTop: 20,
    backgroundColor: 'white',
    flexDirection: 'row',
    padding: 10,
  },
  hengtabItem: {
    flex: 1,
    textAlign: 'center',
    borderBottomColor: '#f5f5f5',
    borderBottomWidth: 1,
    paddingLeft: '10%',
  },
  hengtabText: {
    fontSize: 14,
    color: 'gray',
  },
  hengtabSelected: {
    height: 40,
    fontWeight: 'bolder',
    color: '#FFD700',
    borderBottomColor: '#FFD700',
    borderBottomWidth: 3,
    marginLeft: '30%',
    textAlign: 'center',
  },
  //表单
});

export default UserLogin;
